<script>
  import global_msg from "../../global";
  import aplayer from "vue-aplayer";
  import axios from "axios";
  import personal from "../components/personal.vue";
  import topNav from "../components/topNav.vue"
  import RandomBlogComponent from "../components/RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"
  export default {
    components: {
      aplayer,
      personal,
      topNav,
      RandomBlogComponent,
      bottomInfo
    },
    data() {
      return {
        cover:'',
        createTime:'',
        lastReviseTime:'',
        viewNum:'',
        c1Show:false,
        cateShow:false,
        replyCommentId:'',
        replyFlag:false,
        replyNickname:'',
        replyListLength:'',
        commentListLength:'',
        commentList:[],
        commentInput:{
          content:'',
          qq:'',
          email:''
        },
        pickerShow:false,
        detail:[],
        randomBlog: [],
        sinput: '',
        typingTexts: [
          "Je t'aime",
          "Music",
          "Tarvel",
          "Coding"
        ],
        sign: [
          "Je t'aime",
          "Music",
          "Tarvel",
          "Coding"
        ],
      };
    },
    methods: {
      toRecord() {
        this.record=true
        this.headerShow=false
        this.home=false
        this.c1Show=false
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 0,
          left: 0
        });
      },
      toDetail(id) {
        this.$router.push({path:'/detail',query:{id:id}})
        location.reload()
      },
      toCate(type) {
        this.toHome()
        this.currentCate=type
        this.headerShow=false
        this.c1Show=true
        axios.put("/getbytype",this.$qs.stringify({type:type})).then(res=>{
          this.paginationPage(res)
        })
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 0,
          left: 0
        });
      },
      //跳转至gitee
      toGitee() {
        window.location.href = global_msg.gitee
      },
      toNetMusic() {
        window.location.href = global_msg.netmusic
      },
      toBili() {
        window.location.href = global_msg.bilibili
      },

      showCate() {
        if(this.cateShow==false) {
          this.cateShow=true
        } else {
          this.cateShow=false
        }
      },
      getRandomBlog() {
        axios({
          method: 'get',
          url: '/getrandom',
        }).then(res => {
          this.randomBlog = res.data.data
        })
      },
      personalChange() {
        this.$refs.personal.style.height = '60vh'
      },
      getDeatil() {
        axios.post("/getbyid",this.$qs.stringify({id:this.$route.query.id})).then(res =>{
          this.detail=res.data.data
          this.cover=res.data.data.cover
          this.createTime=res.data.data.createTime
          this.lastReviseTime=res.data.data.lastReviseTime
          this.viewNum=res.data.data.viewNum
        })
      },
      toHome() {
        this.$router.push('/home')
      },
      showEmojiPicker() {
        if(this.pickerShow==false) {
          this.pickerShow=true;
        } else {
          this.pickerShow=false;
        }
      },
      selectEmoji(emoji) {// 选择emoji后调用的函数
        let input = document.getElementById("comment-input")
        let startPos = input.selectionStart
        let endPos = input.selectionEnd
        let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
        input.value = resultText
        input.focus()
        input.selectionStart = startPos + emoji.data.length
        input.selectionEnd = startPos + emoji.data.length
        this.text = resultText
      },
      uploadComment() {
        //检查QQ号是否为空
        if(this.commentInput.qq.length==0) {
          this.$message('QQ号不能为空')
          return
        }
        //检查邮箱是否为空
        if(this.commentInput.email.length==0) {
          this.$message('邮箱不能为空')
          return
        }
        //检查评论是否为空
        if(this.commentInput.content.length==0) {
          this.$message('评论不能为空')
          return
        }
        //发送请求
        var formData=new FormData()
        formData.append('qq',this.commentInput.qq);
        formData.append('email',this.commentInput.email);
        formData.append('content',this.commentInput.content);
        //检查是回复评论还是评论文章
        if(this.replyFlag===false) {
          formData.append('blogId',this.$route.query.id);
          axios.put('/upload/comment',formData).then(res =>{
            if(res.data.code) {
              if(res.data.code==200) {
                this.$message('评论成功')
                this.$router.go(0)
              } else if(res.data.code==501) {
                this.$message('QQ号码错误，请检查后重试')
              }
            }
          })
        } else {
          console.log(this.replyCommentId)
          formData.append('commentId',this.replyCommentId);
          axios.put('upload/reply',formData).then(res =>{
            if(res.data.code) {
              if(res.data.code==200) {
                this.$message('回复成功')
                this.$router.go(0)
              }
            }
          })
        }
      },
      getComment() {
        axios.post("/getcomment",this.$qs.stringify({blogId:this.$route.query.id})).then(res =>{
          this.commentList=res.data.data
          this.commentListLength=res.data.data.length
        })
      },
      replyThis(event) {
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 1600,
          left: 0
        });
        this.replyFlag=true;
        this.replyCommentId = event.currentTarget.id
        var nickname=event.currentTarget.getAttribute("nickname")
        this.replyNickname=nickname;
      },
      noReply() {
        this.replyFlag=false;
      },
      addView() {
        axios.put('/add/view',this.$qs.stringify({id:this.$route.query.id}))
        console.log("阅览量+1~")
      },
    },
    created() {
      this.addView()
      this.getDeatil()
      this.getRandomBlog()
      this.getComment()
    },
    computed: {
      coverVar() {
        return {
          'background-image': 'url('+this.cover+');'
        }
      }
    }
  }
</script>

<template>
  <div ref="app" class="app" style="background-color: white">
    <topNav></topNav>
    <div class="d-as" :style="{ backgroundImage: `url(${cover})` }">
      <div style="width: 100%;height: 100%;background-color: black;opacity: 0.4;text-align: center">
      </div>
      <div style="  position: absolute;
  bottom: 5%;
  color: white;
  left: 40%;  transform: translateX(-50%)">
        <div class="d-title">{{detail.title}}</div>
        <div style="display: flex">
          <el-image :src="require('../assets/images/headshot.jpg')" style="width: 35px;border-radius: 17.5px"></el-image>
          <div style="font-size: 13px;margin-left: 10px;text-align: center;text-shadow: 0 5px 10px #000000">
            <div style="position: relative;top: 60%;transform: translateY(-50%)">RoChes <span style="margin-left: 5px;margin-right: 5px">·</span> 发布于 {{createTime}} <span style="margin-left: 5px;margin-right: 5px">·</span> 最后修改于 {{lastReviseTime}} <span style="margin-left: 5px;margin-right: 5px">·</span> {{viewNum}} 次阅读</div>
          </div>
        </div>
      </div>
    </div>
    <el-container class="middle">
      <el-main style="width: 100vw;overflow: hidden">

        <div CLASS="d-blog" ref="blog">
          <div class="blog-desc">
            <v-md-preview  :text="detail.content"></v-md-preview>
          </div>
          <div style="width: 100%;height: 20px;margin-top: 20px"></div>
        </div>
        <div class="comment">
          <div style="font-size: 20px;font-weight: 550;margin-bottom: 20px;display: flex">评论<div style="margin-left: 10px;font-size: 13px;margin-top: 6px;color: grey;font-weight: normal">{{commentListLength}}</div></div>
          <div class="post-comment">
            <div v-show="replyFlag" style="margin-left: 50px;height: 20px;text-align: start;border-radius: 10px;font-size: smaller;display: flex;color: grey">回复 <div style="margin-left:10px;color: #409eff" >@{{replyNickname}}</div><i @click="noReply" class="el-icon-close" style="margin-top: 2.5px;margin-left: 5px;cursor: pointer"></i></div>
            <el-image @click="showEmojiPicker" class="comment-headshot" :src="require('../assets/images/emoji.png')"></el-image>
            <el-input v-model="commentInput.content" id="comment-input" type="textarea" rows="2" resize="none" placeholder="随意发表下评论呗~" style="font-size: 13px;margin-left: 10px;user-select: none;width: 80%;border-radius: 20px"></el-input>
            <el-button @click="uploadComment">发表</el-button>
            <i class="el-icon-my-friend nav-icon" style="margin-left: 25px;position: relative;top: 8px"></i>
            <input class="qq" v-model="commentInput.qq" placeholder="输入QQ号自动获取头像昵称"></input>
            <i class="el-icon-my-email nav-icon" style="margin-left: 20px;position: relative;top: 8px"></i>
            <input class="email" v-model="commentInput.email" placeholder="输入邮箱获取回复通知"></input>
            <VEmojiPicker @select="selectEmoji" v-show="pickerShow" style="position: absolute;left: 5%;z-index: 999;top: 150px;height: 200px;"/>
          </div>
          <div class="one-comment" v-for="item in commentList">
            <div class="info">
              <el-image class="comment-headshot" :src="item.headshot"></el-image>
              <div style="margin-top: 10px;font-size: 9px;font-weight: 600;color: #61666d;margin-left: 15px;position: relative;top: 15px">{{item.nickname}}</div>
              <div class="one-content">
                {{item.content}}
              </div>
              <div class="comment-time">
                {{item.time}}
              </div>
              <div class="comment-reply" @click="replyThis($event)" :id="item.id" :nickname="item.nickname">
                回复
              </div>
              <div class="reply" v-for="rep in item.replyList">
                <el-image class="reply-headshot" :src="rep.headshot"></el-image>
                <div style="font-size: 9px;font-weight: 600;color: #61666d;margin-left: 10px;margin-top: 3px">{{rep.nickname}}</div>
                <div class="reply-content">
                  {{rep.content}}
                </div>
                <div class="reply-time">
                  {{ rep.time }}
                </div>
              </div>
<!--              <div class="reply-more">共86条回复，<span class="asd">点击查看</span></div>-->
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <bottomInfo></bottomInfo>
  </div>
</template>
<style>
  @import "../assets/test.css";
</style>
<style src="../assets/detail.css" scoped>
</style>
